<template>
  <div>
    <el-card
      v-for="log in logList"
      :key="log.id"
      class="mt10 log-card"
    >
      <div>
        <strong>{{ log.operator }}</strong>
        {{ log.logTypeDesc }}
      </div>
      <div class="time">
        {{ log.createTime }}
      </div>
      <div
        v-if="log.extInfo && log.extInfo.changeItems"
        class="change-list-wrap"
      >
        <div
          v-for="(item, index) in log.extInfo.changeItems"
          :key="index"
        >
          <div class="mt10 change-item">
            <div>
              <el-tag
                size="small"
                class="mb5"
              >
                {{ item.fieldName }}
              </el-tag>
            </div>
            <span v-if="item.oldName">
              {{ item.oldName }}
            </span>
            <span v-else>
              {{ $t("form.formData.notData") }}
            </span>
            <span class="ml10 mr10">→</span>
            <span v-if="item.newName">
              {{ item.newName }}
            </span>
            <span v-else>{{ $t("form.formData.notData") }}</span>
          </div>
        </div>
      </div>
    </el-card>
    <el-empty v-if="!logList.length" />
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
import { getFormDataLogsRequest, UserFormDataLog } from "@/api/project/data";

const props = defineProps({
  id: {
    type: Number,
    required: true
  }
});

const logList = ref<UserFormDataLog[]>([]);

watch(
  () => props.id,
  value => {
    getFormDataLogsRequest(value).then(res => {
      if (res.data) {
        logList.value = res.data;
      }
    });
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

<style scoped lang="scss">
.log-card {
  .time {
    font-size: 13px;
    color: #999;
  }
}
.change-item {
  span {
    overflow-wrap: break-word;
  }
}
</style>
